<template>
	<div class="Vehicleindex">
       <el-table
	      :data="VehicleBody"
	      style="width: 100%"
	      max-height="760"
	      border
	      >   
	      <el-table-column
		        label="全选"
		        width="50"
		        fixed
		   >
		        <template slot-scope="scope">
			        <el-checkbox
			          type="text"
			        >
			        </el-checkbox>
			    </template>
		  </el-table-column>
	      <el-table-column 
		        type="index"
		        label="序号"
		        width="50"
		        fixed
		    >
		  </el-table-column>
		      <el-table-column
		        prop="plateNumber"
		        label="车牌号"
		        min-width="90"
		        >
		      </el-table-column>
		      <el-table-column
		        prop="driverName"
		        label="已绑定司机"
				min-width="100"
		        >
		      </el-table-column>
		      <el-table-column
		        prop="typeName"
		        label="车辆类型"
		        min-width="80"
		        >
		      </el-table-column>
		      <el-table-column
		        prop="carLoad"
		        label="载重"
		        min-width="60"
		        >
		      </el-table-column>
		      <el-table-column
		        prop="cardBoard"
		        label="卡板"
		        min-width="60"
		        >
		      </el-table-column>
		      <el-table-column
		        prop="carVolume"
		        label="体积"
		        min-width="80"
		        >
		      </el-table-column>
              <el-table-column
		        prop="carLength"
		        label="车长"
		        min-width="60"
		        >
		      </el-table-column>
              <el-table-column
		        prop="carReside"
		        label="车辆归属"
		        min-width="90"
		        >
		      </el-table-column>
              <el-table-column
		        prop="carBrand"
		        label="车辆品牌"
		        min-width="80"
		        >
		      </el-table-column>
              <el-table-column
		        prop="numberplate"
		        label="牌照类型"
		        min-width="120"
		        >
		      </el-table-column>
              <el-table-column
		        prop="drivingLicenseNumber"
		        label="行驶证号码"
		        min-width="120"
		        >
		      </el-table-column>
		      <el-table-column
			      prop="companyName"
			      label="组织机构"
				  min-width="100"

				  :filters="optionsss"
				  :filter-method="filterTag"
			       filter-placement="bottom-end"
			   >
			   	 <template slot-scope="scope">
			        <el-tag
			          disable-transitions>
			          {{scope.row.companyName}}
			        </el-tag>
			      </template>
			   </el-table-column>
			   <el-table-column
			      prop="userName"
			      label="创建人"
				 	  min-width="100"
			   >
			   </el-table-column>
			   <el-table-column
			      prop="createdTime"
			      label="创建时间"
				  	min-width="160"
			   >
			   </el-table-column>
			   <el-table-column
			      label="操作"
			      min-width="100"
			   >
			      <template slot-scope="scope">
			        <el-button
			          @click.native.prevent="deleteRow(scope.$index, VehicleBody)"
			          type="text"
			          size="small">
			                      移除
			        </el-button>
			        <el-button
			          @click.native.prevent="redactRow(scope.$index, VehicleBody)"
			          type="text"
			          size="small">
			                    编辑
			        </el-button>
			      </template>
			    </el-table-column>
		</el-table>
		<div class="buttom">
			<el-pagination
			background
			:page-size="15"
			:current-page="currentPage"
			@current-change="handleCurrentChange"
			layout="total, prev, pager, next"
		    :total="bottom">
			</el-pagination>
		</div>
      	  <div class="VehicleBody" v-show="Vshow">
	  	 <div class="VehicleSJ">车辆信息</div>
		 <div class="VehicleMess" v-show="Bshow">
            <div>
			  <span class="title">车牌号 :</span>
				 	<el-input
					    placeholder="请输入车牌号"
						v-model="inputadd.plateNumber"
						autocomplete="off"
						clearable
					>
			        </el-input>
			  <span class="title">车辆品牌:</span>
				 	<el-input
					    placeholder="请输入车辆品牌"
						v-model="inputadd.carBrand"
						autocomplete="off"
						clearable
					>
			        </el-input>
			  <span class="title">载重:</span>
				 	<el-input
					    placeholder="请输入载重"
						v-model="inputadd.carLoad"
						autocomplete="off"
						clearable
					>
			        </el-input>
            </div>
            <div class="rows">
              <span class="title">卡&nbsp;&nbsp;&nbsp;&nbsp;板:</span>
				 	<el-input
					    placeholder="请输入卡板"
						v-model="inputadd.cardBoard"
						autocomplete="off"
						clearable
					>
			        </el-input>
			  <span class="title" style="padding-left:.1rem">体&nbsp;&nbsp;&nbsp;&nbsp;积:</span>
				 	<el-input
                        style="padding-left:.2rem"
					    placeholder="请输入体积"
						v-model="inputadd.carVolume"
						autocomplete="off"
						clearable
					>
			        </el-input>
			  <span class="title">车长:</span>
				 	<el-input
					    placeholder="请输入车长"
						v-model="inputadd.carLength"
						autocomplete="off"
						clearable
					>
			        </el-input>
            </div>
            <div class="rows">
			  <span class="title">行驶证号码:</span>
				 	<el-input
					    placeholder="请输入行驶证号码"
						v-model="inputadd.drivingLicenseNumber"
						autocomplete="off"
						clearable
					>
			        </el-input>
			  <span class="title" style="padding-left:.6rem">车辆类型:</span>
				 	<el-select v-model="inputadd.carTypeId" placeholder="厢车">
						<el-option
						v-for="item in optionss"
						:key="item.id"
						:label="item.typeName"
						:value="item.id">
						</el-option>
					</el-select>
            </div>
            <div class="rows">
 			  <span class="title">牌&nbsp;照&nbsp;类&nbsp;型:</span>
				 	<el-select v-model="inputadd.numberplate" placeholder="大型汽车号牌">
						<el-option
						v-for="item in numberplates"
						:key="item.value"
						:label="item.label"
						:value="item.value">
						</el-option>
					</el-select>
 			  <span class="title">车辆归属:</span>
				 	<el-select v-model="inputadd.carReside" placeholder="司机自有">
						<el-option
						v-for="item in carResides"
						:key="item.value"
						:label="item.label"
						:value="item.value">
						</el-option>
					</el-select>
            </div>
              <div class="rows">
			  <el-row :gutter="20">
			   <el-col :span="4">
				<span class="title" style="line-height:1.8rem">行驶证图片:</span>
				</el-col>
				<el-col :span="20">
					<el-upload
						action="http://192.168.0.108:9001/file/upload"
						list-type="picture-card"
						:limit="2"
						name="file"
						:on-exceed="onExceed"
						:file-list="fileList"
                        :before-upload="beforeUpload"
						:on-preview="handlePictureCardPreview"
						:on-success="handleAvatarSuccess2"
						:on-remove="handleRemove">
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible">
						<img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
					</el-col>
				</el-row>
			</div>
            <div class="rows">
              <span class="demonstration title">行驶证到期时间&nbsp;:</span>
              <el-date-picker
                    v-model="inputadd.drivingLicenseMaturity"
                    type="date"
                    placeholder="请选择">
              </el-date-picker>
              <span class="demonstration" style="padding-left:.2rem">车辆保险到期时间:</span>
              <el-date-picker
                    v-model="inputadd.carSafetyMaturity"
                    type="date"
                    placeholder="请选择">
              </el-date-picker>
            </div>
            <div class="rows">
              <span class="demonstration title">年&nbsp;检&nbsp;到&nbsp;期&nbsp;时&nbsp;间:</span>
              <el-date-picker
                    v-model="inputadd.annualCheckMaturity"
                    type="date"
                    placeholder="请选择">
              </el-date-picker>
				<span class="title">组织机构:</span>
				 	<el-select style="padding-left:.5rem" v-model="inputadd.companyId" placeholder="中永物流">
						<el-option
						v-for="item in options"
						:key="item.id"
						:label="item.companyName"
						:value="item.id">
						</el-option>
					</el-select>
            </div>
			<div class="rows">
			  	<span class="title" style="line-height:1rem">备注:</span>
				 	<el-input
                        style="padding-left:.5rem"
					 	type="textarea"
						:rows="2"
					    placeholder="备注"
						v-model="inputadd.remark"
						autocomplete="off"
						clearable
					>
			        </el-input>
			</div>
			  <el-row class="VehicleRow">
			  	 <el-button class="VehicleCol" type="primary" @click="cancel">取消</el-button>
				 <el-button class="VehicleCol" type="primary" @click="next">下一步</el-button>
			  </el-row>
		 </div>
		 <div class="VehicleBess" v-show="Dshow">
		 	<el-table
				:data="tableData4"
				height="300"
				border
				style="width: 100%"
				tooltip-effect="dark"
				ref="tag"
				>
				<el-table-column
				type="selection"
				width="55">
				</el-table-column>
				<el-table-column
				prop="driverName"
				label="司机姓名">
				</el-table-column>
				<el-table-column
				prop="idCardNo"
				label="身份证号">
				</el-table-column>
				<el-table-column
				prop="phone"
				label="手机号">
				</el-table-column>
				<el-table-column
				prop="drivingLicense"
				label="驾驶证">
				</el-table-column>
				<el-table-column
				prop="companyId"
				label="组织机构">
				</el-table-column>
			</el-table>
			  <el-row class="VehicleRow">
			  	 <el-button class="VehicleCol" type="primary" @click="cancel(123)">取消</el-button>
				 <el-button class="VehicleCol" type="primary" @click="getBack">返回</el-button>
				 <el-button class="VehicleCol" type="primary" @click="create">提交</el-button>
			  </el-row>
		 </div>
	  </div>
	</div>
</template>

<script>
import {debounce} from '@/common/commons.js'
import { mapState,mapMutations } from 'vuex'
export default {
	name:"DriverBody",
	props:{
		VehicleBody:Array,
		bottom:Number
	},
	data(){
		return{
            carResides: [{
		          value: '司机自有',
		          label: '司机自有'
		        }, {
		          value: '外协',
		          label: '外协'
		    },{
		          value: '公司发配',
		          label: '公司发配'
		    }],
            numberplates: [{
		          value: '大型汽车号牌',
		          label: '大型汽车号牌'
		        }, {
		          value: '小型汽车号牌',
		          label: '小型汽车号牌'
		    },{
		          value: '其他号牌',
		          label: '其他号牌'
		    }],
			dialogImageUrl: '',
      		dialogVisible: false,
			fileList: [], //行驶证图片显示列表
			Bshow: true, //填写司机信息窗口
			Dshow: false, //绑定车辆窗口
			Vshow: false, //新增窗口
			currentPage: 1,
			optionss: null, //默认组织机构
			options:[], //组织机构列表(修改)
			optionsss:[], //列表显示组织结构
			inputadd:{
                plateNumber: "", //车牌号
                carTypeId: "", //车辆类型
                driverId: "", //司机编号
                carLoad: "", //载重
                cardBoard: "", //卡板
                carVolume: "", //体积
                carLength: "", //车长
                carReside: "", //车辆归属
                carBrand: "", //车辆品牌
                numberplate: "", //牌照类型
                drivingLicenseNumber: "", //行驶证号码
                drivingLicenseImg: "", //行驶证图片
                drivingLicenseMaturity: "", //行驶证到期时间
                carSafetyMaturity: "", //车辆保险到期时间
                annualCheckMaturity: "", //年检到期时间
                companyId: "", //组织编号
                userName: "", //创建人
                remark: "", //备注
				id: "",
			},
			tableData4: [{}],
		}
	},
	methods: {
		//组织机构显示
	  filterTag(value, row) {
		  value=value+""
        return row.companyId === value;
      },
		//是否删除
		deleteRow(index,rows) {
            const _this = this
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
			  confirmButtonText: '确定',
			  cancelButtonText: '取消',
			  type: 'warning'
			}).then(() => {
			  this.CompanyDelete(index,rows)
			  this.$message({
			  type: 'success',
			  message: '删除成功!'
			});
			rows.splice(index, 1);
			}).catch(() => {
			   this.$message({
			     type: 'info',
			     message: '已取消删除'
			   })        
			})
		},
		//删除
		CompanyDelete(index,rows){
			let qs = require('qs')
			this.axios.post(`${this.baseURL}/car/delete`,
				qs.stringify({
					id:rows[index].id
				})
				).then(res=>{
			})
		},
		//更换车辆
		updateRow(){
			console.log("123")
		},
		//修改/编辑
		redactRow(index,rows){
			const _this=this
			this.Vshow=!this.Vshow
			console.log(rows[index]);
			const row=rows[index].drivingLicenseImg
			if(row){
			const lor=row.split(";");

			for(var i=0;i<lor.length;i++){
				if(lor[i]!="undefined"){
					if(lor[i]!=""){
					_this.fileList.push({url:lor[i]})}
				}
			}
			}
			this.inputadd=rows[index]
			console.log(this.inputadd);
			//this.inputadd.idCardImg={}
			this.option()
			this.OpType()
			//_this.inputadd.carId=rows[index].id;
			if(_this.inputadd.driverId){
			this.axios.get(`${this.baseURL}/driver/findOne`,{
				params:{
					id:_this.inputadd.driverId
				}
			}).then(res=>{
				if(res.data.data!=null){		
				_this.tableData4.push(res.data.data)
				_this.inputadd.carId=res.data.data.id
				}
			})
			}
		},
		//请求组织机构
		option(){
			const _this=this
			this.axios.get(`${this.baseURL}/company/findAll`,{
				params:{
				}
			}
			).then(res=>{
				var data=res.data.data
				_this.options=data
				var newdata = JSON.parse(JSON.stringify(data).replace(/companyName/g,"text"))
				var newdatas   = JSON.parse(JSON.stringify(newdata).replace(/id/g,"value"))
		      	_this.optionsss  = newdatas
			})
		},
		//图片删除
		handleRemove(file, fileList) {
        	const _this=this
			const src=file.url
			let qs=require("qs");
			this.axios.post(`${this.baseURL}/file/deleteUpload`,
				qs.stringify({urlPath:src})
			).then(res=>{
				const idcid=_this.inputadd.drivingLicenseImg
				console.log(idcid);
				const lor1=idcid.split(";"); 
				console.log(lor1);
				for(var i=0;i<lor1.length;i++){
					if(lor1[i]==src){
						lor1[i]="undefined"
					}
				}
				_this.inputadd.drivingLicenseImg=lor1
			})

      	},
		//查看大图
		handlePictureCardPreview(file) {
        	this.dialogImageUrl = file.url;
        	this.dialogVisible = true;
      	},
		//上传成功(行驶证图片)
		handleAvatarSuccess2(res, file){
			//console.log(res.data);
			this.inputadd.drivingLicenseImg+=(';'+res.data)
		},
		//取消
		cancel(){
			this.Vshow=!this.Vshow;
			this.Bshow=true;
			this.Dshow=false;
			this.fileList=[]
			this.tableData4=[]
		},
		//下一步
		next(){
			this.Bshow=false,
			this.Dshow=true
		},
		//返回
		getBack(){
			this.Bshow=true,
			this.Dshow=false
		},
        //选择车辆类型
        OpType(){
            const _this=this
            this.axios.get(`${this.baseURL}/carType/findAll`
            ).then(res=>{
                res=res.data.data
                _this.optionss=res
            })
        },
		//当前页
		handleCurrentChange(curPage){
			//this.currentPage=curPage
			//console.log(curPage);
			this.$emit('addVehicleBody',curPage)
		},
		//提交
		create(){
			const _this=this
			let qs=require("qs");
			delete _this.inputadd.carId
			delete _this.inputadd.companyName
			delete _this.inputadd.createdTime
			delete _this.inputadd.driverName
			delete _this.inputadd.modifiedTime
			delete _this.inputadd.typeName
			console.log(_this.inputadd);
			 this.axios.post(`${this.baseURL}/car/update`,
				 qs.stringify(_this.inputadd)
			 ).then(res=>{
				 if(res.data.status){
					this.$message({
						type: 'success',
						message: '修改成功!'
					});
					this.changeisRouter(false)
						this.$nextTick(function(){
						this.changeisRouter(true) 
					})
				 };
			})
		},
		...mapMutations(['changeisRouter']),
		//上传图片的个数
		onExceed(files, fileList) {
            this.$message.error("上传图片不能超过2张");
        },
		//文件上传前的前的钩子函数
        //参数是上传的文件，若返回false，或返回Primary且被reject，则停止上传
        beforeUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isGIF = file.type === 'image/gif';
            const isPNG = file.type === 'image/png';
            const isBMP = file.type === 'image/bmp';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG && !isGIF && !isPNG && !isBMP) {
                this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 2MB!');
            }
            return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
        },
	},
	computed: {
		 ...mapState(['isRouterAlive'])
	},
	mounted() {
		this.option()
		
	},
	// created:function(){
	// 	this.createAll();
	// }
}
</script>

<style scoped>
    .Vehicleindex >>> .el-table td,.Vehicleindex  >>> .el-table th {
		text-align: center;
	}
	.Vehicleindex .VehicleBody{
		width:10rem;
		border-radius: 0.2rem;
		min-width:800px;
		z-index: 11111;
		position:absolute;
		top:5%;
		left:50%;
		transform: translate(-50%,0);
        overflow: hidden;
		box-shadow: 0 0 0.5rem #cac6c6;
	}
	.Vehicleindex .VehicleBody .VehicleSJ{
		width:100%;
		border: .02rem solid #eaeaea;
		background:#20A0FF;
		position:relative;
		text-align: center;
		line-height: .8rem;
		color:#fff;
		font-size: 0.34rem;
		font-weight: bold
	}
	.Vehicleindex .VehicleBody .VehicleMess{
		padding-top:.2rem;
		background-color:#fff;
		border: .02rem solid #eaeaea;
	}
	.Vehicleindex .VehicleBody .VehicleMess .title{
		margin-left:.2rem
	}
    .Vehicleindex .VehicleBody .VehicleMess .rows{
        padding-top:.2rem
    }
	.Vehicleindex .VehicleBody .VehicleMess >>> .el-textarea{
		width:50%
	}
	.Vehicleindex .VehicleBody .VehicleMess >>> .el-input__icon{
        line-height:.2rem
    }
	.Vehicleindex .VehicleBody .VehicleMess >>> .el-input{
		width:23%;
	}
	.Vehicleindex .VehicleBody .VehicleMess >>> .el-select .el-input{
		width:100%
	}
	.Vehicleindex .VehicleBody .VehicleMess >>> .el-select .el-input__icon{
		line-height:.7rem
	}
	.Vehicleindex .VehicleBody .VehicleMess >>> .el-input__inner{
		display:left;
		height:.6rem;
		width:100%
	}
	.Vehicleindex .VehicleBody .VehicleMess >>> .el-upload--picture-card{ 
		line-height:0;
		width:2rem;
		height:2rem
	}
	.Vehicleindex .VehicleBody .VehicleMess >>> .el-upload--picture-card i{
		line-height:2rem;
	}
	.index .VehicleBody .VehicleMess >>> .el-upload-list--picture-card .el-upload-list__item-actions{
		width:2rem;
		height:2rem;
	}
	.Vehicleindex .VehicleBody .VehicleMess >>> .el-upload-list__item{
		width:2rem;
		height:2rem
	}
	.Vehicleindex .VehicleBody .VehicleRow{
		text-align:center;
	}
	.Vehicleindex .VehicleBody .VehicleCol{
		width:2rem;
		margin:.2rem
	}
	.Vehicleindex .VehicleBody .VehicleBess{
		padding:.2rem;
		background-color:#fff;
		box-shadow: 0 0 0.5rem #cac6c6;
		border: .02rem solid #eaeaea;
	}
	.Vehicleindex .VehicleBody .VehicleBess .spancar{
		margin:.2rem .1rem;
		font-size:.4rem; 
		color:#ccc
	}
	.Vehicleindex .buttom{
		text-align:center;
		padding-top:.3rem
	}
</style>